// gulp内置方法:  <src() 打开指定目录> <pipe() 执行操作,写一个就执行一次操作> <dest() 将数据写到指定目录>  
//                <series() 串行(同步)执行多个任务> <parallel() 并行(异步)执行多个任务> <watch() 监听文件并执行任务(文件改变时执行任务)>
const { src, pipe, dest, parallel,series, watch } = require('gulp');


const babel = require('gulp-babel');   // es6转es5

const htmlmin = require('gulp-htmlmin'); // html压缩
var cssmin = require('gulp-cssmin');   // css压缩
var jsmin = require('gulp-uglify');  // js压缩


let sass = require('gulp-sass')(require('sass'));   // 编译sass
var concat = require('gulp-concat'); // 用于合并文件
let del = require('del'); // 删除文件夹或文件

var browserSync = require('browser-sync');  // 服务器


function clean() {
    // 清除构建目录dist
    return del('./dist/');
}

exports.clean = clean


// src/index.html复制到dist
// 压缩并打包html文件
function html() {
    // src 打开指定文件||目录,后面的pipe就对这个文件||目录进行操作
    return src('./src/index.html')
        // htmlmin 压缩html
        .pipe(htmlmin({ collapseWhitespace: true }))
        // 复制到dist目录
        .pipe(dest('./dist'))

}

// 格式: exports.任务名 = 这次任务要执行的操作      <任务名自定义,要执行的操作多是函数>
// 使用格式: gulp 任务名                           <就会执行该任务的操作>

// 使用方法: 在终端输入gulp copyHtml 就能执行html函数
exports.html = html




// 将sass转成css->合并css->压缩->重命名->dist/css
function css() {
    // src 找到css文件里所有后缀是sass的文件
    return src('./src/css/*.sass')
        // concat 将所有sass文件合并成一个index.css文件
        .pipe(concat('index.css'))
        .pipe(sass())
        .pipe(cssmin())  //压缩css
        .pipe(dest('./dist/css'))
}

exports.css = css



// 将es6的js代码文件转换成es5并压缩
function js() {

    return src('./src/js/index.js')
        .pipe(
            babel({ presets: ['@babel/preset-env'] })
        )
        .pipe(
            jsmin()    //压缩js
        )
        // 执行上列操作后吧app.js复制到dist的目录里
        .pipe(dest('./dist/js/'));

}

exports.js = js;



// 实现页面热加载,并实时将最新的文件写入dist以便打包
function htmlLoad() {
    // 启动一个服务器
    browserSync.init({
        // 指定一个网站根目录
        server: "./dist"
    })
    // watch(要监听的文件<监听>,文件改变后执行的代码)
    watch('./src/index.html', html).on('change', browserSync.reload) // 页面刷新
    watch('./src/js/index.js', js).on('change', browserSync.reload)
    watch('./src/css/index.sass', css).on('change', browserSync.reload)
        
}



// 热加载任务
// 这里用series()<串行>比较好,用parallel()<并行>的话可能页面还没渲染就开始执行热加载函数,这样会导致页面显示不出来
exports.htmlLoad = series(html,css,js,htmlLoad)

